<template>
	<view class="bannerEnrollPage">
		<u-swiper :list="swiperList" indicator indicatorMode="dot" circular height="60vw" radius="0px"
			@click="goDetail">
		</u-swiper>
		<view class="detailContent">
			<view class="solutionDetailTitle">{{courseInfo.name}}</view>
			<view class="solutionDetailInfo">
				<u-parse style="width: 100%;word-break: break-all;" :content="courseInfo.content"></u-parse>
			</view>
		</view>
		<view class="solutionOperate">
			<view class="operateItem specialItem" @click="collect">
				<u--image src="/static/solution/2.png" shape="square" mode="aspectFill" width="32rpx" height="32rpx"
					v-if="!courseInfo.isCollection">
				</u--image>
				<u--image src="/static/solution/22.png" shape="square" mode="aspectFill" width="32rpx" height="32rpx"
					v-else>
				</u--image>
				<view class="text">收藏</view>
			</view>
			<view class="operateItem specialItem" @click="showShareContent=true">
				<u--image src="/static/solution/1.png" shape="square" mode="aspectFill" width="32rpx" height="32rpx">
				</u--image>
				<view class="text">分享</view>
			</view>
			
			<view class="operateItem" @click="signup" v-if="courseSignUp">
				<view class="signbutton">已报名</view>
			</view>
			<view class="operateItem" @click="signup" v-else>
				<view class="signbutton">我要报名</view>
			</view>
		</view>

		<!-- <view class="enrollWrap">
			<u-form :model="form" ref="uForm">
				<u-form-item label="请输入您的姓名" prop="name" left-icon="account">
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="请输入您的电话" prop="mobile" left-icon="phone">
					<u-input v-model="form.mobile" />
				</u-form-item>
				<u-form-item label="请输入您的邮箱" prop="email" left-icon="email">
					<u-input v-model="form.email" />
				</u-form-item>
			</u-form>
			<u-button @click="submit">提交</u-button>
		</view> -->
		<u-popup :show="showPopup" :round="10" mode="center" @close="closePopup" @open="openPopup">
			<view class="popup-form" v-if="courseSignUp==null">
				<u--form :model="formInfo" labelPosition="left" ref="signForm">
					<u-form-item prop="name" borderBottom labelWidth="30" left-icon="account"
						left-icon-style="font-size:24px">
						<u--input v-model="formInfo.name" placeholder="请输入您的姓名" border="none"></u--input>
					</u-form-item>
					<u-form-item prop="phone" borderBottom labelWidth="30" left-icon="phone"
						left-icon-style="font-size:24px">
						<u--input v-model="formInfo.phone" placeholder="请输入您的电话" border="none"></u--input>
					</u-form-item>
					<u-form-item prop="email" borderBottom labelWidth="30" left-icon="email"
						left-icon-style="font-size:24px">
						<u--input v-model="formInfo.email" placeholder="请输入您的邮箱" border="none"></u--input>
					</u-form-item>
				</u--form>
				<view class="formbtn">
					<view class="confirm-button" @click="submitForm">提交</view>
				</view>
			</view>
			<view class="popup-form" v-else>
				<u--form :model="formInfo" labelPosition="left" ref="signForm">
					<u-form-item prop="name" borderBottom labelWidth="30" left-icon="account"
						left-icon-style="font-size:24px">
						<u--input v-model="formInfo.name" disabled disabledColor="" placeholder="请输入您的姓名" border="none"></u--input>
					</u-form-item>
					<u-form-item prop="phone" borderBottom labelWidth="30" left-icon="phone"
						left-icon-style="font-size:24px">
						<u--input v-model="formInfo.phone" disabled disabledColor="" placeholder="请输入您的电话" border="none"></u--input>
					</u-form-item>
					<u-form-item prop="email" borderBottom labelWidth="30" left-icon="email"
						left-icon-style="font-size:24px">
						<u--input v-model="formInfo.email" disabled disabledColor="" placeholder="请输入您的邮箱" border="none"></u--input>
					</u-form-item>
				</u--form>
				<view class="formbtn">
					<view class="confirm-button" @click="confirmForm">确认</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showShareContent" :round="10" mode="bottom" @close="close" @open="open">
			<view class="shareContent">
				<view class="title">分享到</view>
				<view class="shareInfo">
					<button class="shareItem" open-type="share">
						<u--image src="/static/share/2.png" radius="50%" shape="square" mode="aspectFill"
							width="106rpx" height="106rpx">
						</u--image>
						<view class="itemTitle">微信</view>
					</button>
					<button class="shareItem" @click="goDiscuss">
						<u--image src="/static/share/1.png" radius="50%" shape="square" mode="aspectFill"
							width="106rpx" height="106rpx">
						</u--image>
						<view class="itemTitle">社区内发帖</view>
					</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getUser
	} from '@/utils/vmall.js';
	export default {
		data() {
			return {
				swiperList: [],
				courseInfo: {},
				userInfo: {},
				info: {
					name: '报名的课程',
					content: '<div class="show-more-article_article__2uCG4"><div class="show-more_height-is-full__1SWBC show-more_wrap__3nml7"><div><div class="normal_padding__25EN7"><div class="text-parser_wrap__11Rrt text-parser_theme-news__3ZLdW"><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m"><div><div><img class="text-parser_img__1MPXz" src="http://inews.gtimg.com/newsapp_bt/0/15233371588/641" alt="图片"></div><div class="text-parser_imgDesc__2QD51"></div></div></div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">9月8日凌晨，苹果秋季发布会正式发布了iPhone 14系列新机、新一代Apple Watch系列，以及第二代AirPods Pro。前不久的9月6日，华为在线上举办Mate 50及全场景新品秋季发布会，包括Mate 50系列及AITO问界M5EV等产品集体亮相。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">其中，iPhone 14和Mate 50两大系列手机均宣布支持卫星通信，引发广泛关注。除了卫星通信外，iPhone 14系列和华为Mate 50系列还有什么亮点设计？</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m"><div><div><img class="text-parser_img__1MPXz" src="http://inews.gtimg.com/newsapp_bt/0/15233371589/641" alt="图片"></div><div class="text-parser_imgDesc__2QD51"></div></div></div><div class="text-parser_modP__1wm5Q text-parser_h2__gZkq0">均支持卫星通信，但细节不同</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">值得一提的是，作为特色亮点，虽然两者都支持卫星通信，但在细节方面有所不同。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">首先，在所使用的卫星服务方面，华为Mate 50系列使用的是北斗三号短报文通信服务，iPhone 14系列则使用的是移动卫星通信公司Globalstar的服务。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">在具体使用方面，在无地面网络信号覆盖环境下，华为Mate 50系列支持通过畅联App发送文字和位置信息，并支持多条位置生成轨迹地图，但不支持通话。苹果iPhone 14系列则引入“卫星紧急求援（Emergency SOS via Satellite）”功能，和华为一样，在无网络情况下，该功能也无法通过卫星连接拨打电话，但可以发送短消息。此外，iPhone会预先加载重要的问题评估选项（如缺水程度），以便在卫星连接窗口期立即将SOS信息发给紧急救援人员。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">在支持地区方面，目前Mate 50系列的卫星通信功能仅支持在中国大陆地区使用，而iPhone 14系列的“卫星紧急求援”功能将于11月上线，首批仅支持在美国、加拿大两国使用。</div><div class="text-parser_modP__1wm5Q text-parser_h2__gZkq0">苹果iPhone14系列：</div><div class="text-parser_modP__1wm5Q text-parser_h2__gZkq0">“灵动岛”惊喜，“车祸检测”人性化应急</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">iPhone系列新品最大的变化在机型方面，mini版本被取消，新增了6.7英寸的14 Plus版本。颜色方面则推出了暗紫色的Pro版。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">而iPhone 14 Pro的“刘海屏”变成“药丸屏”，且通过一个全程可见的交互小屏幕“灵动岛（Dynamic Island）”，将硬件和UI设计融合一体，则堪称苹果发布会的最大亮点。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">灵动岛功能带来了全新的交互方式，模糊了硬件和软件的界限，实时变化不同的形态，以显示重要的提醒、通知和活动。在不影响屏幕内容显示的前提下，灵动岛保持活跃状态，让用户仅需长按即可使用控制选项，地图、音乐或计时器等App保持后台运行时始终可见并可交互。而且，除了官方软件，灵动岛还支持第三方软件的交互适配。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">在芯片方面，iPhone 14系列搭载来自iPhone 13 Pro系列的A15仿生芯片，iPhone 14 Pro系列则搭载最新的A16仿生芯片。据了解，A16芯片集成了苹果史上最高的160亿个晶体管，CPU性能提升40%，功耗降低20%，续航提升。而且5核GPU让图像处理能力大幅提升，更让摄像头翻两番到4800万像素。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">此外，iPhone 14系列采用了新的高动态范围陀螺仪和感应器，可以进行车祸检测，一旦出现严重车祸，系统主动联系紧急救援，还可通知紧急联系人。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">值得一提的是，苹果宣布美版iPhone 14系列不再预留SIM卡槽而是改为支持eSIM服务，这在iPhone史上是第一次。</div><div class="text-parser_modP__1wm5Q text-parser_h2__gZkq0">华为Mate 50系列：</div><div class="text-parser_modP__1wm5Q text-parser_h2__gZkq0">“智感扫码”便捷，图片脱敏保护隐私安全</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">时隔两年，华为再次发布Mate系列新品，虽然不支持5G，但除了在材质、摄像、电池等硬件方面持续升级外，还带来了系列新技术、新功能。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">在存储方面，首发“超空间存储压缩技术”，在256GB测试模型下最多可以节省20GB可用空间，而且可以通过扫描识别出多个应用中使用的重复文件，进而对其进行无损压缩并保留访问路径，确保文件可被正常访问的同时，仅占用一份存储空间。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">在交互方面，首发搭载鸿蒙系统3.0，“超级中转站”功能支持用户将图片、文档、文字等信息暂存至中转站，在不同应用或设备间随心拖拽、批量分享，实现跨设备、跨应用的高效流转。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">在续航方面，创新推出“应急模式”，可在1%低电量下智能启动聚能泵，支持待机3小时，或通话12分钟，或亮码10次，或扫码4次等操作，解决用户的燃眉之急。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">华为Mate 50系列还增加了不少人性化设计，让生活更便捷，隐私更安全。比如支持“智感扫码”功能，连续敲击后盖两次后可快速扫码，自动识别场所码、付款码、单车码等。再比如，支持图片脱敏、AI隐私保护功能，在用户社交分享图片时，自动抹除位置、时间等拍摄信息，并支持将图片中识别出的隐私信息一键打码。</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">出品：南都大数据研究院</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">数据采集分析：唐静怡</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">设计：林泳希</div><div class="text-parser_modP__1wm5Q text-parser_p__2YRXL text-parser_pRevision__7xk0m">数据来源：苹果发布会、华为发布会、公开媒体报道</div></div></div></div></div></div>'
				},
				formInfo: {
					name: '',
					phone: '',
					email: ''
				},
				showPopup: false,
				rules: {
					name: [{
						required: true,
						message: '请输入真实姓名',
						min: 2,
						max: 10,
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'change',
					}],
					phone: [{
						pattern: /^1[0-9]{10}$/,
						message: '请输入正确的手机号',
						trigger: 'change'
					}],
					email: [{
						pattern: /^\w{3,}(\.\w+)*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,5}){1,2}$/,
						message: '请输入正确的邮箱地址',
						trigger: 'change'
					}]
				},
				showShareContent: false,
				signedList: [],
				courseSignUp: null
			}
		},
		onLoad(option) {
			if (option.id) {
				this.courseId = option.id
			}
			getUser().then(info => {
				this.userInfo = info
				this.init()
			})
		},
		methods: {
			init() {
				Promise.all([
					this.$request.get(this.$api.getBanner, {
						type: 1
					}),
					this.$request.get(this.$api.signupList, {
						userId: this.userInfo.id
					}),
					this.$request.get(this.$api.signedList, {
						createBy: this.userInfo.id
					})
				]).then(res => {
					// uni.stopPullDownRefresh()
					let swiperList = [];
					res[0].result.map(item => {
						swiperList.push(this.$appFunc.getFileUrl(item.url))
					})
					
					this.courseInfo = res[1].result.records ? res[1].result.records[0] : {},
					this.signedList = res[2].result.records
					let courseSignUp = this.signedList.find(item => {
						return item.sysOrgCode == this.courseInfo.id
					})
					this.swiperList = this.courseInfo.images ? this.courseInfo.images.split(',') : []
					this.courseSignUp = courseSignUp || null
					if (this.courseSignUp) {
						this.formInfo = {
							name: courseSignUp.name,
							phone: courseSignUp.collection,
							email: courseSignUp.readingVolume
						}
					}
					uni.hideLoading()
				})
			},
			signup() {
				this.showPopup = true
			},
			openPopup() {},
			closePopup() {
				this.showPopup = false
			},
			confirmForm() {
				this.showPopup = false
			},
			submitForm() {
				if (!this.formInfo.name) {
					uni.showToast({
						icon: "none",
						title: "请输入姓名"
					})
					return;
				}
				if (!this.rules.phone[0].pattern.test(this.formInfo.phone)) {
					uni.showToast({
						icon: "none",
						title: this.rules.phone[0].message
					})
					return;
				}
				if (!this.rules.email[0].pattern.test(this.formInfo.email)) {
					uni.showToast({
						icon: "none",
						title: this.rules.email[0].message
					})
					return;
				}
				this.showPopup = false
				let signupData = {
					name: this.formInfo.name,
					collection: this.formInfo.phone,
					readingVolume: this.formInfo.email,
					createBy: this.userInfo.id,
					sysOrgCode: this.courseInfo.id
				}
				this.$request.post(this.$api.signupAdd, signupData).then(res => {
					this.courseSignUp = signupData
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: "恭喜你, 报名成功!"
					})
				})
			},

			collect() {
				let url = ""
				if (this.courseInfo.isCollection) {
					url = this.$api.signupCollect
				} else {
					url = this.$api.signupCollect
				}
				this.$request.get(url, {
					id: this.courseInfo.id,
					userId: this.userInfo.id,
					type: 2
				}).then(res => {
					uni.hideLoading()
					if (!this.courseInfo.isCollection) {
						this.courseInfo.isCollection = true;
						uni.showToast({
							icon: "success",
							title: "收藏成功",
							duration: 3000
						})
						return;
					}
					if (this.courseInfo.isCollection) {
						this.courseInfo.isCollection = false;
						uni.showToast({
							icon: "success",
							title: "取消收藏成功",
							duration: 3000
						})
						return;
					}
					
				})
			},
			close() {
				this.showShareContent = false;
			},
			open() {
				this.showShareContent = true;
			},
			goDiscuss() {
				uni.setStorage({
					key: "shareData",
					data: {
						id: this.courseInfo.id,
						types: "6"
					},
					success: () => {
						uni.switchTab({
							url: "/pages/discuss/discuss"
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.bannerEnrollPage {
		background-color: #fff;

		.detailContent {
			display: inline-block;
			position: relative;
			width: 670rpx;
			overflow-x: hidden;
			overflow-y: auto;
			padding: 40rpx;
		}

		.solutionDetailTitle {
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 600;
			color: #333333;
			font-size: 36rpx;
			border-bottom: 1px solid #CBE1EF;
			padding-bottom: 40rpx;
		}

		.solutionDetailInfo {
			padding-top: 40rpx;
			color: #666666;
			font-size: 28rpx;
			padding-bottom: 120rpx;
		}
		
		.solutionOperate {
			display: flex;
			justify-content: space-around;
			flex-wrap: nowrap;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			box-shadow: 0px -2px 4px 1px rgba(0, 0, 0, 0.04);
			background: #ffffff;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
		
			.operateItem {
				display: flex;
				justify-content: center;
				flex-wrap: nowrap;
				align-items: center;
				font-size: 26rpx;
				padding: 24rpx 0;
				position: relative;
		
				&:nth-child(1),
				&:nth-child(2) {
					width: 160rpx;
				}
		
				&:nth-child(3) {
					padding-left: 20rpx;
				}
		
				.text {
					padding-left: 8rpx;
					display: inline-block;
				}
			}
		
			.specialItem {
				&:after {
					content: "";
					display: inline-block;
					height: 32rpx;
					width: 1px;
					background-color: #BDBDBDFF;
					position: absolute;
					right: 0;
					top: calc(50% - 16rpx);
				}
			}
		}
		

		.signbutton {
			background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
			border-radius: 30px;
			// height: 40px;
			width: 350rpx;
			padding:24rpx 0;
			// line-height: 40px;
			color: #fff;
			text-align: center;
		}

		.enrollWrap {}

		.popup-form {
			padding: 100rpx 50rpx;
			width: 660rpx;
			box-sizing: border-box;

			.tip {
				color: $uni-text-color-grey;
				padding-top: 30rpx;
			}

			.u-form {
				padding-bottom: 30rpx;
			}

			.u-form-item {
				background-color: rgba(239, 239, 239, 1);
				border-radius: 48px;
				padding: 0rpx 40rpx;
				margin-bottom: 40rpx;
			}

			.confirm-button {
				background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
				box-shadow: 0px 1px 0px 1px #aec3db;
				border-radius: 48px;
				height: 45px;
				width: 100%;
				line-height: 45px;
				color: #fff;
				text-align: center;
			}

		}
		.shareContent {
			height: 400rpx;
		
			.title {
				height: 100rpx;
				border-bottom: 1rpx solid #eeeeee;
				text-align: center;
				line-height: 100rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		
			.shareInfo {
				display: flex;
				justify-content: space-around;
				flex-wrap: nowrap;
				padding-top: 40rpx;
		
				.shareItem {
					display: flex;
					flex-direction: column;
					align-items: center;
		
					.itemTitle {
						padding-top: 30rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}
	}
</style>
